<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.phone"
        placeholder="手机号"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.company"
        filterable
        class="filter-item"
        clearable
        placeholder="请选择加油站"
        @keyup.enter.native="handleFilter"
      >
        <el-option v-for="item in cooperation" :label="item.company" :value="item.company"/>
      </el-select>
      <!-- <el-input v-model="listQuery.title" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-select
        v-model="listQuery.type"
        placeholder="类型"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option label="加油站" value="1" aria-checked=""/>
        <!-- <el-option
          label="修理站"
          value="2"
        />-->
        <el-option label="加气站" value="3"/>
        <!-- <el-option
          label="总公司"
          value="4"
        />-->
      </el-select>
      <el-select
        v-model="listQuery.state"
        placeholder="状态"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option label="开启" value="0" aria-checked=""/>
        <el-option label="关闭" value="1"/>
      </el-select>
      <!-- <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>-->
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >{{ $t('table.search') }}
      </el-button>
      <!-- <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >{{ $t('table.add') }}</el-button>-->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        {{ $t('table.export') }}
      </el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        {{ $t('table.reviewer') }}
      </el-checkbox>-->
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border=""
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="序号" prop="id" align="center" width="50">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="姓名" min-width align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="电话" min-width align="center">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column label="车牌" min-widthh align="center">
        <template slot-scope="scope">{{ scope.row.vehicle }}</template>
      </el-table-column>
      <el-table-column label="银行" width="" align="center">
        <template slot-scope="scope">{{ scope.row.bankName }}</template>
      </el-table-column>
      <el-table-column label="银行卡号" min-width align="center">
        <template slot-scope="scope">{{ scope.row.accountNo }}</template>
      </el-table-column>
      <el-table-column label="持卡人身份证" min-width align="center">
        <template slot-scope="scope">{{ scope.row.bankIdCard }}</template>
      </el-table-column>
      <el-table-column label="持卡人姓名" min-width align="center">
        <template slot-scope="scope">{{ scope.row.bankAcountName }}</template>
      </el-table-column>
      <el-table-column label="类型" min-width align="center">
        <template slot-scope="scope">{{ scope.row.state| stateFilter }}</template>
      </el-table-column>
      <el-table-column label="申请" min-width align="center">
        <template slot-scope="scope">{{ scope.row.applyer }}</template>
      </el-table-column>
      <el-table-column label="执行" min-width align="center">
        <template slot-scope="scope">{{ scope.row.worker }}</template>
      </el-table-column>
      <el-table-column label="三方" min-width align="center">
        <template slot-scope="scope">{{ scope.row.money }}</template>
      </el-table-column>
      <el-table-column label="京东" min-width align="center">
        <template slot-scope="scope">{{ scope.row.jdMoney }}</template>
      </el-table-column>
      <el-table-column label="提现时间" min-width align="center">
        <template slot-scope="scope">{{ scope.row.payDate }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="170px"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope" v-if="scope.row.state!=2">
          <el-button type="primary" size="mini" @click="handleGetMoney(scope.row)">同意</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row)" style="width:70px">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog title="新增" :visible.sync="dialogFormVisible" top="2vh" width="600px">
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="140px"
        style="width: 500px; margin-left:30px;"
      >
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model="temp.phone"/>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankCard">
          <el-input v-model="temp.bankCard" clearable/>
        </el-form-item>
        <el-form-item label="开户人" prop="bankUserName">
          <el-input v-model="temp.bankUserName" clearable/>
        </el-form-item>
        <el-form-item label="开户人身份证号码" prop="bankIdCard">
          <el-input v-model="temp.bankIdCard" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提现" :visible.sync="dialogFormMoney" top="2vh" width="600px">
      <el-form
        ref="temp1"
        :rules="rules"
        :model="temp1"
        label-position="left"
        label-width="100px"
        style="width: 300px; margin-left:50px;"
        class="demo-dynamic"
      >
        <el-form-item label="姓名" prop="remainder">
          <el-input v-model="temp1.remainder" :disabled="true"/>
        </el-form-item>
        <el-form-item label="电话" prop="remainder">
          <el-input v-model="temp1.remainder" :disabled="true"/>
        </el-form-item>

        <el-form-item label="提现金额" prop="money8">
          <el-input v-model="temp1.money" :disabled="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormMoney = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="getMoney()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import checkPermission from "@/utils/permission"; // 权限判断函数

  import {fetchPv, updateCooperation} from "@/api/article";
  import {
    cooperationList,
    createCooperation,
    editPay,
    getCode,
    getallAgent,
    cooperationAll
  } from "@/api/v1";
  import {cooperationUnBind} from "@/api/user";
  import {forList} from "@/api/get-list";
  import { post, get } from "@/api/v1";

  import waves from "@/directive/waves"; // Waves directive
  import {parseTime} from "@/utils";
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import qrCode from "@/components/qrcode";
  import {Loading} from "element-ui";
  import provinceData from "@/components/province";
  import addUsers from "@/components/addUsers";

  export default {
    name: "ComplexTable",
    components: {Pagination, qrCode, provinceData, addUsers},
    directives: {waves, permission},
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger"
        };
        return statusMap[status];
      },


      stateFilter(state) {
        if (state == 18) {
          return "浦发待付";
        } else if (state == 2) {
          return "待付款";
        } else if (state == 3) {
          return "付款成功";
        } else if (state == 4) {
          return "取消";
        } else if (state == 14) {
          return "交易处理中";
        } else if (state == 6) {
          return "待审核";
        } else if (state == 7) {
          return "延迟付款";
        } else if (state == 8) {
          return "交易退款";
        } else if (state == 9) {
          return "交易失败";
        } else if (state == 10) {
          return "支付到余额";
        } else if (state == 11) {
          return "系统操作异常";
        } else if (state == 12) {
          return "支付取消";
        } else if (state == 13) {
          return "预申请";
        } else if (state == 16) {
          return "风控审核不通过";
        } else if (state == 15) {
          return "风控通过待处理";
        } else {
          return "";
        }
      },
     /* stateFilter(state) {
        if (state == 1) {
          return "关闭";
        } else if (state == 0) {
          return "开启";
        } else {
          return "";
        }
      }*/
    },
    data() {
      return {
        rules: {
          name: [{required: true, message: "请输入姓名", trigger: "blur"}],
          bankCard: [
            {required: true, message: "请输入银行卡号", trigger: "change"}
          ],
          phone: [{required: true, message: "请输入电话", trigger: "change"}],
          bankUserName: [
            {required: true, message: "请输入开户人", trigger: "change"}
          ],
          bankIdCard: [
            {required: true, message: "请输入身份证号码", trigger: "change"}
          ],
          money: [{required: true, message: "请输入金额", trigger: "change"}]
        },
        imageUrl: "",
        codeVal: "",
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        dialogFormMoney: false,
        listQuery: {
          page: 1,
          limit: 20,
          phone: "",
          name: "",
          type: "",
          sort: "+id",
          state: "",
          company: ""
        },
        showReviewer: false,
        temp: {
          phone: "",
          bankCard: "",
          bankUserName: "",
          bankIdCard: ""
        },
        temp1: {
          remainder: "",
          money: ""
        },

        cooperation: {},

        dialogFormVisible: false,
        dialogCode: false,
        dialogPay: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "新增"
        },
        dialogPvVisible: false,
        pvData: [],
        downloadLoading: false,
        isAdmin: true
      };
    },
    created() {
      this.getList();
    },
    methods: {
      del(row) {
        console.log(row)
        this.$confirm("此操作将决绝该条提现申请，是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          post(this.API.URL.DRAW_HANDLE, row).then(res => {
            this.$message({
              message: res.message || "success",
              type: "success",
              duration: 2 * 1000
            });
          });
        });
      },
      getMoney(row) {
        console.log(this.temp1);
        this.temp1.bankCardId = this.temp1.id;
        this.$refs["temp1"].validate(valid => {
          if (valid) {
            agentGetMoney(this.temp1).then(res => {
              this.dialogFormMoney = false;
              Message({
                message: res.msg || "success",
                type: "success",
                duration: 2 * 1000
              });
            });
          }
        });
      },
      handleGetMoney(row) {
        this.temp1 = Object.assign({}, row); // copy obj
        console.log(row);
        console.log(this.temp1);
        this.dialogFormMoney = true;
        this.$nextTick(() => {
          this.$refs["temp1"].clearValidate();
        });
      },

      getList() {
        this.listLoading = true;
        forList(this.API.URL.DRAW_LIST, this.listQuery).then(response => {
          this.list = response.data.records;
          this.total = Number(response.data.total);

          this.listLoading = false;
        });
      },
      resetTemp() {
        this.temp = {
          phone: "",
          bankCard: "",
          bankUserName: "",
          bankIdCard: ""
        };
      },

      handleCreate() {
        this.resetTemp();
        console.log(this.temp);
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },

      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            console.log(this.temp);
            createCooperation(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.getList();
            });
          }
        });
      },
      handleUpdate(row) {
        this.resetTemp();
        this.temp = Object.assign({}, row); // copy obj
        console.log(row);
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
      },

      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      sortChange(data) {
        const {prop, order} = data;
        if (prop === "id") {
          this.sortByID(order);
        }
      }
    }
  };
</script>


